import React, { Component } from "react"; 
import styles from "./login.css";
import router from "umi/router"; 
import { Login } from "ant-design-pro";
import {connect} from 'dva';
const { UserName, Password, Submit } = Login; // 通用的用户名、密码和提交组件

@connect()
export default class extends Component {
  onSubmit = (err,values) =>{
    if(!err){
      console.log('success');
      this.props.dispatch({type:'user/login',payload:values});//要加上models的命名空间作为前缀
    }
  }
  render() { 
    return (
    <div className={styles.loginForm}> {/* logo */}
      <img className={styles.logo} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/> {/* 登录表单 */}
      <Login onSubmit={this.onSubmit}> 
        <UserName name="username" placeholder="admin"
          rules={[{ required: true, message: "请输入用户名" }]} />
        <Password name="password" placeholder="123"
          rules={[{ required: true, message: "请输入密码" }]} /> 
        <Submit>登录</Submit>
      </Login>
    </div>
    )
  }
}
